<template>
  <view :class="$style.situation_container">
    <view :class="$style.title">{{ titleName }}</view>


    <view class="flex justify-around items-center" style="margin-bottom: 45rpx">
      <view class="scroll_left" @click="handleScrollEvent('left')">
        <image :src="scrollLeftImg" mode="widthFix" class="operate_image" />
      </view>
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft" enable-flex>
        <block v-for="(item, index) in mediaInfo" :key="index" @click="previewLocaleMedia">
          <image id="image{{index}}" :src="item.dmtDz" mode="scaleToFill" class="scroll_image"
            v-show="item.dmtLx == 0" />
        </block>
      </scroll-view>
      <view class="scroll_right" @click="handleScrollEvent('right')">
        <image :src="scrollRightImg" mode="widthFix" class="operate_image" />
      </view>
    </view>

  </view>

</template>

<script setup lang='ts'>
import { ref } from "vue";

import scrollLeftImg from '@/static/images/alert-detail/scroll_left.png'
import scrollRightImg from '@/static/images/alert-detail/scroll_right.png'

let titleName: string = "现场图像";

/** props 传递的媒体信息 */
interface Props {
  mediaInfo: any
};
const {
  mediaInfo = {},
} = defineProps<Props>();

let old = {
  scrollTop: 0
}
const scroll = (e: any) => {
  old.scrollTop = e.detail.scrollTop
}
const scrollLeft = ref<number>(0)

function handleScrollEvent(direction: string) {
  scrollLeft.value = old.scrollTop
  if (direction == 'left') {
    scrollLeft.value -= 200
  } else {
    scrollLeft.value += 200
  }
  if (scrollLeft.value < 0) {
    scrollLeft.value = 0
  }
  // scrollIntoView.value = 'image' + scrollLeft.value
}

function previewLocaleMedia() {

  // mediaUrlList.value = res.data && res.data.map((item: any) => {
  //   return {
  //     url: item.dmtDz,
  //     type: item.dmtGs
  //   }
  // }) || []
}



</script>

<style lang='less' module>
.situation_container {
  width: calc(100% - 60rpx);
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 45rpx;
  }
}
</style>
<style scoped>
.scroll-view_H {
  white-space: nowrap;
  width: calc(100% - 65rpx);
  margin-left: 20rpx;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll_image {
  width: 180rpx;
  height: 120rpx;
  margin-right: 21rpx;
}

.operate_image {
  width: 15rpx;
}
</style>
